<template>
  <div class="hot">
    <div class="myhead">
      <h4>热门借阅</h4>
      <div class="tips">
        统计范围：<span class="red">2</span>个月统计方式：借阅次数分类：<span class="red">总体排行</span>
      </div>
    </div>
    <div class="classify">

      <span>总体排行</span>
      <span> A 马克思主义、列宁主...</span>
      <span> B 哲学、宗教</span>
      <span> C 社会科学总论</span>
      <span>D 政治、法律</span>
      <span>E 军事</span>
      <span>F 经济</span>
      <span>G 文化、科学、教育、...</span>
      <span>H 语言、文字I 文学</span>
      <span>J 艺术</span>
      <span>K 历史、地理</span>
      <span>N 自然科学总论</span>
      <span>O 数理科学和化学</span>
      <span>P 天文学、地球科学</span>
      <span>Q 生物科学</span>
      <span>R 医药、卫生</span>
      <span>S 农业科学</span>
      <span>T 工业技术</span>
      <span> U 交通运输</span>
      <span>V 航空、航天</span>
      <span>X 环境科学、安全科学</span>
      <span>Z 综合性图书</span>
    </div>
    <div class="tubiao">
      <el-table :data="items" height="500px" border style="width: 100%">
        <el-table-column prop="id" label="id" width="180">
        </el-table-column>
        <el-table-column prop="title" label="书名" width="180">
        </el-table-column>
        <el-table-column prop="rpeople" label="作者">
        </el-table-column>
        <el-table-column prop="publishpeople" label="出版社">
        </el-table-column>
        <el-table-column prop="bookku" label="藏书库">
        </el-table-column>
        <el-table-column prop="price" label="价格">
        </el-table-column>
        <el-table-column prop="img" label="图片">
          <template scope="scope">
            <p v-if="scope.img!=null">
              <img :src="scope.row.img" />
            </p>
            <div v-else>
              <img :src=img alt="">
            </div>

          </template>
</el-table-column>
<el-table-column prop="total" label="册数">
</el-table-column>
</el-table>
<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000">
</el-pagination>
</div>

</div>
</template>
<script>
    import booksApi from '@/api/books'
    export default {
        data() {
            return {
                img: "http://www.cxznlibwx.com:8084?isbn=7-81043-062-9"
            }
        },
        asyncData() {
            return booksApi.list(1, 12).then(res => {
                return {
                    items: res.data.data.rows
                }
            })
        },
    }
</script>
<style>
    .red {
        color: red;
    }

    .hot {
        height: 800px;
    }

    .cell img {
        width: 100px;
        height: 100px;
    }

    .myhead {
        height: 50px;
        line-height: 50px;
        margin: 0 20px;
        border-bottom: 1px solid #d5d5d5;
        display: flex;
        justify-content: space-around;
    }

    .myhead h4 {
        font-size: 20px;
        font-weight: bold;
    }

    .tips {
        font-size: 16px;
    }

    .classify {
        margin: 10px 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .classify span {
        text-align: center;
        line-height: 30px;
        width: 11%;
        color: #3d6e94;
        font-size: 14px;
    }

    .tubiao {
        padding: 30px;
    }
</style>
